<template>
  <!--   数据切换按钮   -->
  <van-button class="fun-btn"
              size="mini"
              v-bind:type="isChecked ? '' : 'default'"
              v-bind:color="isChecked ? checkedColor : noCheckedColor">
    {{btnText}}
  </van-button>
</template>

<script>
  export default {
    name: "fun-button",
    props: {
      btnText: {
        type: String,
        default: '按钮',
        require: true
      },
      isChecked: {
        type: Boolean,
        default: false,
        require: true
      }
    },
    data() {
      return {
        checkedColor: 'linear-gradient(to right, #3CB4FF, #2D8DFB)',
        noCheckedColor: '',
      };
    }
  }
</script>

<style scoped>
  .fun-btn {
    width: 100px;
    height: 24px;
    text-align: center;
    vertical-align: middle;
    font-size: 9px;
    line-height: 24px;
    border-radius: 45px;
  }
</style>